<template>
  <page-form ref="formRef" :model="form" layout="vertical" class="relative">
    <!-- 复制配置按钮 -->
    <div class="copy-config">
      <a-dropdown @select="copyConfigFn">
        <a-button type="primary">复制配置<icon-down style="margin-left: 8px" /></a-button>
        <template #content>
          <a-doption value="fromOther">从其他门店复制配置</a-doption>
          <a-doption value="copyTo">复制配置到其他门店</a-doption>
        </template>
      </a-dropdown>
    </div>
    <!-- 夜间服务费配置规则 -->
    <service-config-night-sevice :configTypePropStr="configTypePropStr" v-if="configTypePropStr !== 'longSiteConfig'" />
    <a-divider :margin="0" style="margin: 0 0 20px 0" v-if="configTypePropStr !== 'longSiteConfig'" />
    <!-- 零散小时配置规则 -->
    <page-form-row>
      <page-form-item size="1" label="零散小时" v-if="configTypePropStr !== 'longSiteConfig'">
        <template #label="{ label }">
          <span class="font-bold">{{ label }}</span>
        </template>
        <div class="page-form-block">
          <a-space direction="vertical" fill :size="20">
            <div class="w-full block">
              不足24小时且满足
              <i-input-number
                v-model="form[configTypePropStr].hourToDay"
                :min="1"
                :max="24"
                :precision="0"
                :style="{ width: '163px' }"
                unit="小时"
              />，按一整天收费
            </div>
            <div class="w-full flex">
              不满一整天的则<a-radio-group v-model="form[configTypePropStr].hourAmountType">
                <a-radio v-for="item in dict.hourAmountTypeMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
              </a-radio-group>
            </div>
          </a-space>
        </div>
      </page-form-item>
    </page-form-row>
    <a-divider :margin="0" style="margin: 0 0 20px 0" v-if="configTypePropStr !== 'longSiteConfig'" />
    <!-- 上门送取车配置规则 -->
    <service-config-pickup :configTypePropStr="configTypePropStr" />
    <a-divider :margin="0" style="margin: 0 0 20px 0" />
    <!-- 同城异店还车 -->
    <service-config-return
      :configTypePropStr="configTypePropStr"
      :propStrList="['isDiffSiteReturn', 'isDiffSiteFee', 'diffSiteFee', 'diffSiteReturnCar']"
      :dictStrList="['diffSiteReturnMap', 'diffSiteFeeMap', 'diffCityReturnCarMap']"
      :labelStrList="['是否允许同城异店还车', '同城异店还车是否收费', '每次服务收费']"
      @returnFlagChange="returnFlagChangeFn"
    />
    <!-- 允许同城异店还车才显示跨域异店还车配置 -->
    <template v-if="form[configTypePropStr].isDiffSiteReturn == 1">
      <a-divider :margin="0" style="margin: 0 0 20px 0" />
      <!-- 跨域异店还车 -->
      <service-config-return
        :configTypePropStr="configTypePropStr"
        :propStrList="['isDiffCityReturn', 'isDiffCityFee', 'diffCityFee', 'diffCityReturnCar']"
        :dictStrList="['diffCityReturnMap', 'diffCityFeeMap', 'diffCityReturnCarMap']"
        :labelStrList="['是否允许跨城异店还车', '跨城异店还车是否收费', '每公里收费']"
      />
    </template>
    <a-divider :margin="0" style="margin: 0 0 20px 0" />
    <!-- 超时费 -->
    <page-form-row>
      <page-form-item size="1" label="是否收取超时费" :style="{ marginBottom: form[configTypePropStr].isOverTimeFee ? '3px' : '10px' }">
        <template #label="{ label }">
          <span class="font-bold">{{ label }}</span>
        </template>
        <a-radio-group v-model="form[configTypePropStr].isOverTimeFee">
          <a-radio v-for="item in dict.overTimeFeeMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
        </a-radio-group>
      </page-form-item>
      <!-- 收费规则 -->
      <div class="page-form-block" style="margin-bottom: 20px" v-if="form[configTypePropStr].isOverTimeFee == 1">
        <!-- 收费规则 -->
        <page-form-item label="收费规则" style="margin-bottom: 0" size="1">
          <a-radio :default-checked="true">超出时间按零散小时计算</a-radio>
        </page-form-item>
      </div>
    </page-form-row>
    <a-divider :margin="0" style="margin: 0 0 20px 0" />
    <!-- 超里程费 -->
    <page-form-row>
      <page-form-item size="1" label="是否收取超里程费" :style="{ marginBottom: form[configTypePropStr].isOverMilesFee ? '3px' : '10px' }">
        <template #label="{ label }">
          <span class="font-bold">{{ label }}</span>
        </template>
        <a-radio-group v-model="form[configTypePropStr].isOverMilesFee">
          <a-radio v-for="item in dict.overMilesFeeMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
        </a-radio-group>
      </page-form-item>
      <!-- 收费规则 -->
      <div class="page-form-block" v-if="form[configTypePropStr].isOverMilesFee == 1">
        <!-- 收费规则 -->
        <page-form-item label="收费规则" class="item-rule-wrap" style="margin-bottom: 0" size="1">
          <div class="item-rule-text">每天公里数</div>
          <page-form-item
            :style="{
              marginBottom: 0,
            }"
            :field="`${configTypePropStr}.limitMiles`"
            :rules="{ message: '请输入公里数', required: true }"
          >
            <i-input-number
              class="ml-1 mr-1"
              v-model="form[configTypePropStr].limitMiles"
              unit="公里"
              :precision="0"
              :style="{ width: '163px' }"
            />
          </page-form-item>
          <div class="item-rule-text" :style="{ 'margin-left': '5px' }">超出公里按</div>
          <page-form-item
            :style="{
              marginBottom: 0,
            }"
            :field="`${configTypePropStr}.milesPrice`"
            :rules="{ message: '请输入金额', required: true }"
          >
            <i-input-number class="ml-1" unit="元/公里" v-model="form[configTypePropStr].milesPrice" :style="{ width: '163px' }" />
          </page-form-item>
        </page-form-item>
      </div>
    </page-form-row>
    <a-divider :margin="0" style="margin: 0 0 20px 0" />
    <!-- 门店取消 -->
    <service-config-cancel :configTypePropStr="configTypePropStr" />
  </page-form>
  <!-- 复制配置弹窗 -->
  <service-config-copy-modal :configTypePropStr="configTypePropStr" ref="serviceConfigCopyModalRef" />
</template>

<script setup name="MerchantStoreServiceConfig">
  import { ref, inject } from 'vue'
  import serviceConfigNightSevice from './service-config-night-sevice.vue'
  import serviceConfigPickup from './service-config-pickup.vue'
  import serviceConfigReturn from './service-config-return.vue'
  import serviceConfigCopyModal from './service-config-copy-modal.vue'
  import serviceConfigCancel from './service-config-cancel.vue'
  const props = defineProps({
    status: {
      type: String,
      default: 'add',
    },
    type: String,
    configTypePropStr: String,
  })
  // 接收父组件
  const form = inject('form')
  const dict = inject('dict')
  const formRef = ref()
  // 同城异店还车开关调整
  const returnFlagChangeFn = (value) => {
    // 关闭同城异店还车开关
    if (value === 0) {
      // 手动将跨城异店开关关闭
      form.value[props.configTypePropStr].isDiffCityReturn = 0
    }
  }

  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error, scrollErrorFn) => {
        if (error) {
          reject({
            errorKey: props.configTypePropStr,
            scrollErrorFn,
          })
        } else {
          resolve()
        }
      })
    })
  }
  const serviceConfigCopyModalRef = ref()
  const copyConfigFn = (type) => {
    if (type == 'copyTo') {
      validateFn().then(() => {
        serviceConfigCopyModalRef.value.open(type)
      })
    } else {
      serviceConfigCopyModalRef.value.open(type)
    }
  }
  //这里需要暴露出去不然父组件调用不到这个方法
  defineExpose({
    validateFn,
  })
</script>

<style lang="less" scoped>
  .copy-config {
    position: absolute;
    right: 0;
    top: 0;
  }
  .page-form-block {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px;
    width: 100%;
  }
  .item-rule-wrap {
    .item-rule-text {
      line-height: 32px;
      margin-right: 5px;
    }
    :deep(.arco-form-item-content-flex) {
      align-items: flex-start;
    }
  }
  .date-icon {
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer;
    img {
      margin-right: 8px;
      width: 16px;
      height: 16px;
    }
  }
  .del-icon {
    color: #ea0000;
  }
  .add-icon {
    color: #165dff;
  }
</style>
